<template>
    <div class="header">
        <div class="title">
            <div class="title-left"></div>
            <div class="title-mid">个人中心</div>
            <div class="title-right"><van-icon name="setting-o" @click="showPopup" /></div>
        </div>
        <div class="person">
            <!-- 选择文件,预览 -->
            <input class="input" type="file" ref="file" @change="uploadFunc" />
            <div class="person_head" v-if="user_avator">
                <img :src="user_avator" alt="" />
            </div>
            <!-- <div class="save" @click="saveImgFunc">保存头像</div> -->
            <div class="person_name">{{ user_name }}</div>
        </div>
    </div>
    <div class="function">
        <div class="select">
            <div class="select_item" @click="notreceived">
                <div class="img">
                    <van-icon name="send-gift-o" color="#a7a7a7" />
                </div>
                <div class="con">待收货</div>
            </div>
            <div class="select_item" @click="toreceived">
                <div class="img"><van-icon name="send-gift-o" color="#a7a7a7" /></div>
                <div class="con">已收货</div>
            </div>
            <!-- <div class="select_item">
                <div class="img"><van-icon name="send-gift-o" color="#a7a7a7" /></div>
                <div class="con">记录</div>
            </div>
            <div class="select_item">
                <div class="img"><van-icon name="send-gift-o" color="#a7a7a7" /></div>
                <div class="con">历史订单</div>
            </div> -->
        </div>
        <div class="pow">
            <div class="pow_item">
                <div class="pow_box" @click="order">
                    <div class="pow_left">我的订单</div>
                    <div class="pow_right"><van-icon name="arrow" /></div>
                </div>
            </div>
            <div class="pow_item">
                <div class="pow_box">
                    <div class="pow_left">浏览记录</div>
                    <div class="pow_right"><van-icon name="arrow" /></div>
                </div>
            </div>
            <div class="pow_item">
                <div class="pow_box" @click="address">
                    <div class="pow_left">收货地址</div>
                    <div class="pow_right"><van-icon name="arrow" /></div>
                </div>
            </div>
            <div class="pow_item">
                <div class="pow_box" @click="collect">
                    <div class="pow_left">我的收藏</div>
                    <div class="pow_right"><van-icon name="arrow" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="cont">
        <van-popup v-model:show="show" position="right" :style="{ width: '30%', height: '100%' }">
            <div class="content">
                <ul>
                    <li @click="personaldata">个人资料</li>
                    <li @click="logout">退出登录</li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { upLoadImg, saveImg, deleteImg, getAvatorNickName } from "../../request/index.js";
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
let router = useRouter();
//记录图片路径
let user_avator = ref("");
//用户名
let user_name = ref("");
let old_user_avator = ref("");
//获取token信息
let token = localStorage.getItem("my_token");
//选择图片
const uploadFunc = (event) => {
    // console.log(event);
    let file = event.target.files[0];
    //记录图片文件信息
    let formData = new FormData();
    formData.append("photo", file);
    //调用上传图片的api
    upLoadImg(formData, { headers: { token } })
        .then((content) => {
            // console.log(content);
            let { code, msg, picUrl } = content;
            if (code == 200) {
                //预览图片
                user_avator.value = picUrl;
                saveImgFunc();
            }
            // alert(msg);
        })
        .catch((err) => {
            console.log(err);
        });
};

//保存头像
const saveImgFunc = () => {
    //保存图片信息
    saveImg({ user_avator: user_avator.value }, { headers: { token } })
        .then((content) => {
            // console.log(content);
            let { code } = content;
            if (code == 200) {
                user_avator.value = content.user_avator;
                //删除旧图片
                deleteImg({ user_avator: old_user_avator.value }, { headers: { token } }).then((result) => {
                    console.log(result);
                });
                initFunc();
            }
        })
        .catch((err) => {
            console.log(err);
        });
};

// 初始化个人中心
const initFunc = () => {
    getAvatorNickName({ token }).then((content) => {
        let { data, code } = content;
        // console.log(content);

        if (code == 200) {
            // console.log(data);
            // localStorage.setItem("user_name", data[0].user_nick_name);
            localStorage.setItem("user_id", data[0].user_id);
            // 获取用户的昵称和头像
            user_avator.value = data[0].user_avator;
            user_name.value = data[0].user_nick_name;
            // 记录旧头像（目的为了给用户修改头像）
            old_user_avator.value = data[0].user_avator;
        } else {
            // alert(content.msg);
            router.push({
                path: "/loginregister/login",
            });
        }
    });
};
initFunc();

let collect = () => {
    router.push({ path: "/mycollect" });
};
let order = () => {
    router.push({ path: "/order" });
};
let address = () => {
    router.push({ path: "/address" });
};
let personaldata = () => {
    router.push({ path: "/personaldata" });
};

let notreceived = () => {
    router.push({ path: "/notreceived" });
};

let toreceived = () => {
    router.push({ path: "/toreceived" });
};

//退出登录
let logout = () => {
    localStorage.removeItem("my_token");
    localStorage.removeItem("user_id");
    router.push({
        path: "/",
    });
};
</script>

<style lang="scss" scoped>
.cont {
    .content {
        height: 100%;
        box-sizing: border-box;
        padding: 0.625rem;
        background-color: rgb(208, 208, 208, 0.2);
        li {
            // font-family: "宋体";
            text-align: center;
            color: #959595;
            font-size: 0.875rem;
            margin: 1.25rem 0;
            background-color: #fff;
            box-sizing: border-box;
            padding: 0.3125rem;
            border-radius: 0.75rem;
        }
    }
}
.header {
    height: 230px;
    background-color: #ff414c;
    background-image: url("@/assets/mybg.jpg");
    background-size: cover;
    border-radius: 0 0 27% 27%;
    .title {
        display: flex;
        justify-content: center;
        height: 2.5rem;
        line-height: 2.5rem;
        color: white;
        display: flex;
        .title-left {
            width: 5rem;
        }
        .title-mid {
            flex: 1;
            text-align: center;
        }
        .title-right {
            width: 5rem;
            font-size: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .person {
        width: 100%;
        height: 5rem;
        margin-top: 0.625rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 0 0.75rem;
        box-sizing: border-box;
        .input {
            opacity: 0;
            position: absolute;
            width: 3.125rem;
            height: 3.125rem;
        }
        .save {
            position: absolute;
            right: 1.25rem;
            color: #ffffff;
            font-size: 0.9375rem;
            background-color: rgb(169, 169, 169);
            box-sizing: border-box;
            padding: 0.3125rem;
        }
    }
    .person_head {
        border-radius: 50%;
        width: 70px;
        height: 70px;
        box-sizing: border-box;
        background-color: #fff;
        img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
    }
    .person_name {
        box-sizing: border-box;
        padding-top: 0.125rem;
        color: rgb(219, 149, 149);
        font-size: 0.875rem;
    }
}
.function {
    border-radius: 0.75rem;
    width: 95%;
    left: 50%;
    top: 23%;
    transform: translateX(-50%);
    position: absolute;
    height: 500px;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    .select {
        width: 100%;
        height: 5rem;
        margin-top: 0.625rem;
        display: flex;
        .select_item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .img {
            font-size: 1.875rem;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .con {
            padding-top: 0.25rem;
            box-sizing: border-box;
            font-size: 0.875rem;
            color: #888888;
        }
    }
    .pow {
        margin-top: 0.625rem;
        box-sizing: border-box;
        // padding: 0 1.25rem;
        .pow_item {
            color: #5e5e5e;
            padding: 0.5rem 0;
            border-bottom: 1px solid #ccc;
        }
        .pow_box {
            box-sizing: border-box;
            padding: 0 1.125rem;
            height: 1.875rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
